<template>
  <div class="app-container">
    <!-- <el-table
      :data="csData"
      tooltip-effect="dark"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" align="center" width=""/>
      <el-table-column prop="name" label="名称" header-align="center" align="right"/>
      <el-table-column label="操作" align="center" width="">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.on"
            on-color="#00A854"
            on-text="启动"
            on-value="1"
            off-color="#F04134"
            off-text="禁止"
            off-value="0"
            @change="changeSwitch(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table> -->
    <!-- <switch-roles @change="handleRolesChange" /> -->
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="name" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.uid" placeholder="uid" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.accountId" placeholder="accountId" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        Search
      </el-button>
      <el-button :loading="downloadLoading" class="pan-btn pink-btn" type="primary" icon="el-icon-document" @click="handleDownload">
        Export Excel
      </el-button>
      <el-tag>在线人数：{{ onlineNum }}</el-tag>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column align="center" label="ID" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="昵称" width="150" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="UID">
        <template slot-scope="scope">{{ scope.row._uid }}</template>
      </el-table-column>
      <el-table-column label="AccountId">
        <template slot-scope="scope">{{ scope.row.accountId }}</template>
      </el-table-column>
      <!-- <el-table-column label="状态" width="230" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.offlineTime === 0">
            在线
          </div>
          <div v-else>
            离线时间：{{ scope.row.offlineTime | formatDate }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="登录时间" width="160" align="center">
        <template slot-scope="scope">{{ scope.row.lastLoginTime | formatDate }}</template>
      </el-table-column>
      <el-table-column label="星星" width="70" align="center">
        <template slot-scope="scope">{{ scope.row.star + scope.row.starHero + scope.row.starMap + scope.row.starPet + scope.row.starAchiev }}</template>
      </el-table-column>
      <el-table-column label="钻石" width="70" align="center">
        <template slot-scope="scope">{{ scope.row.diamon }}</template>
      </el-table-column>
      <el-table-column label="金币" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.gold }}</template>
      </el-table-column>-->
      <el-table-column label="登录平台" width="100" align="center">
        <template slot-scope="scope">{{ scope.row.platform | formatPlatform }}</template>
      </el-table-column>
      <el-table-column label="工会" align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.unionId != ''">
            <router-link :to="'/union/info/'+scope.row.unionId">
              <el-button type="primary" size="mini">
                查看工会
              </el-button>
            </router-link>
          </label>
        </template>
      </el-table-column>
      <el-table-column label="宠物" align="center">
        <template slot-scope="scope">
          <router-link :to="'/userpet/userpetinfo/'+scope.row._uid">
            <el-button type="primary" size="mini">
              查看
            </el-button>
          </router-link>
          <router-link :to="'/userpet/userpetmodify/'+scope.row._uid">
            <el-button type="primary" size="mini">
              修改
            </el-button>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="英雄" align="center">
        <template slot-scope="scope">
          <router-link :to="'/userhero/userheroinfo/'+scope.row._uid">
            <el-button type="primary" size="mini">
              查看
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageNum" @pagination="fetchData" />

    <el-dialog title="发送邮件" :visible.sync="dialogFormVisible">
      <el-form ref="sendMail" :model="sendMail" :rules="rules" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="name" prop="name">
          {{ sendMail.name }}
        </el-form-item>
        <el-form-item label="accountId" prop="accountId">
          {{ sendMail.accountId }}
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="sendMail.title" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="输入邮件标题" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="sendMail.content" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" placeholder="输入邮件标题" />
        </el-form-item>
        <el-form-item label="物品">
          <el-input v-model="sendMail.res" :autosize="{ minRows: 2, maxRows: 6}" type="textarea" placeholder="输入邮件物品" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="sendMails('sendMail')">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="封禁玩家" :visible.sync="dialogFormVisibleClosure">
      <el-form ref="closurePlayer" :model="closurePlayer" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="UID" prop="uid">
          {{ closurePlayer.uid }}
        </el-form-item>
        <el-form-item label="昵称" prop="name">
          {{ closurePlayer.name }}
        </el-form-item>
        <el-form-item label="accountId" prop="accountId">
          {{ closurePlayer.accountId }}
        </el-form-item>
        <!-- <el-form-item label="封禁时长" prop="closureLength">
          <el-date-picker v-model="closurePlayer.closureLength" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
        </el-form-item> -->
        <el-form-item label="选择" prop="">
          <el-radio-group v-model="closurePlayer.payMode" size="mini" @change="changeUnseal">
            <el-radio-button :label="1">封禁</el-radio-button>
            <el-radio-button :label="2">解封</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="closureVisible" label="封禁结束时间" prop="closureEndTime">
          <el-date-picker v-model="closurePlayer.closureEndTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleClosure = false">
          取消
        </el-button>
        <el-button type="primary" @click="setClosure()">
          确定
        </el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
      <el-select ref="select" v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-table :data="gridData">
        <el-table-column property="date" label="Date" width="150" />
        <el-table-column property="name" label="Name" width="200" />
        <el-table-column property="address" label="Address" />
      </el-table>
    </el-dialog> -->
  </div>

</template>

<script>
import { formatDate } from '@/utils/date'
import { parseTime } from '@/utils'
import { getList, userSendMail, getOnlineNum, setUserClosure } from '@/api/gameuser'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

export default {
  components: { Pagination },
  directives: { elDragDialog, waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    formatDate(time) {
      var date = new Date(time * 1000)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    formatPlatform(val) {
      if (val === 1) {
        return '游客登录'
      }
      if (val === 2) {
        return 'google登录'
      }
      if (val === 3) {
        return 'facebook登录'
      }
      if (val === 5) {
        return 'naver登录'
      }
      if (val === 6) {
        return '华为登录'
      }
      if (val === 7) {
        return 'IOS登录'
      }
      return val
    }
  },
  data() {
    return {
      closureVisible: true,
      payMode: 1,
      value1: '1',
      csData: [
        {
          name: '一',
          on: '0'
        },
        {
          name: '二',
          on: '1'
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      onlineNum: 0, // 在线人数
      list: null,
      listLoading: true,
      downloadLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        pageNum: 20,
        name: '',
        accountId: '',
        uid: ''
      },
      sendMail: {
        uid: '',
        name: '',
        accountId: '',
        title: '',
        content: '',
        res: ''
      },
      closurePlayer: {
        uid: '',
        name: '',
        accountId: '',
        closureStartTime: '',
        closureEndTime: '',
        closureLength: 0,
        payMode: true
      },
      dialogFormVisible: false,
      dialogFormVisibleClosure: false,
      rules: {
        title: [
          { required: true, message: '请输入邮件标题', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入邮件内容', trigger: 'blur' }
        ]
      },
      // dialogTableVisible: false,
      options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' }
      ],
      value: '',
      gridData: [{
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }, {
        date: '2016-05-03',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District'
      }]
    }
  },
  created() {
    this.fetchData()
    // 两分钟更新一次在线人数
    // setInterval(this.handleOnlineNum, 1000 * 120)
    this.handleOnlineNum()
    this.initData({})
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.total = response.data.num
        this.list = response.data.list
        this.listLoading = false
      })
    },
    async initData(data) {
      // 获取当前时间
      this.closurePlayer.closureEndTime = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleOnlineNum() {
      getOnlineNum().then(response => {
        this.onlineNum = response.data.onlineNum
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['昵称', 'UID', '工会', '状态', '登录时间', '星星', '钻石', '金币', '体力']
        const filterVal = ['name', '_uid', 'unionId', 'offlineTime', 'lastLoginTime', 'starSum', 'diamon', 'gold', 'energy']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'offlineTime') {
          if (v[j] === 0) {
            return '在线'
          } else {
            return '离线时间：' + parseTime(v[j])
          }
        } else if (j === 'lastLoginTime') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    handleView(row) {

    },
    handleSendMails(row) {
      this.sendMail.uid = row._uid
      this.sendMail.name = row.name
      this.sendMail.accountId = row.accountId
      this.dialogFormVisible = true
    },
    handleClosure(row) {
      this.closurePlayer.uid = row._uid
      this.closurePlayer.name = row.name
      this.closurePlayer.accountId = row.accountId
      // var date = new Date(row.closureEndTime * 1000)
      // this.closurePlayer.closureEndTime = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      if (row.closureEndTime > 0) {
        this.closurePlayer.payMode = 1 // 封禁
        this.closureVisible = true // 显示封禁时间
      } else {
        this.closurePlayer.payMode = 2 // 解封
        this.closureVisible = false // 隐藏封禁时间
      }
      this.closurePlayer.closureEndTime = new Date(row.closureEndTime * 1000)
      this.dialogFormVisibleClosure = true
    },
    clearMails() {
      this.sendMail.uid = ''
      this.sendMail.title = ''
      this.sendMail.content = ''
      this.sendMail.res = ''
    },
    sendMails(mailForm) {
      this.$refs[mailForm].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false

          var maildata = {
            type: 2,
            uids: [this.sendMail.uid],
            title: this.sendMail.title,
            content: this.sendMail.content,
            res: this.sendMail.res
          }
          // 清理邮件表单数据
          this.clearMails()

          userSendMail(maildata).then(response => {
            this.$notify({
              title: '邮件',
              message: '发送邮件成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    setClosure() {
      // 时间格式化
      this.closurePlayer.closureEndTime = formatDate(this.closurePlayer.closureEndTime, 'yyyy-MM-dd hh:mm:ss')
      var msg = '封禁成功'
      if (this.closurePlayer.payMode === 2) {
        this.closurePlayer.closureEndTime = formatDate(new Date(0), 'yyyy-MM-dd hh:mm:ss')
        msg = '解封成功'
      }
      setUserClosure(this.closurePlayer).then(response => {
        this.$notify({
          title: '提示',
          message: msg,
          type: 'success',
          duration: 2000
        })
        // 设置封禁时间，数据更新
        this.fetchData()
      // eslint-disable-next-line handle-callback-err
      }).catch(err => {
        this.$notify({
          title: '提示',
          message: '失败',
          type: 'fail',
          duration: 2000
        })
      })
      this.dialogFormVisibleClosure = false
      // 设置封禁时间，数据更新
      this.fetchData()
    },
    // v-el-drag-dialog onDrag callback function
    handleDrag() {
      // this.$refs.select.blur()
    },
    test(val) {
    },
    changeSwitch(data) {
    },
    // 切换主题
    changeUnseal(val) {
      if (val === 1) {
        this.closureVisible = true
      } else {
        this.closureVisible = false
      }
    }
  }
}
</script>
